<template>
  <a-modal
    :title="title"
    :width="1010"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="岗位名称"
              :labelCol="{lg: {span: 7}, sm: {span:7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput  disabled v-decorator="['jobName',{rules: [{  required: true, message: '请输入岗位名称' }]}]" placeholder="输入岗位名称" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
              label="岗位类型"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <a-select disabled v-decorator="['jobTypeCode',{rules: [{ required: true, message: '请选择岗位类型' }]}]" placeholder="请选择">
                  <a-select-option v-for="item in limitData.jobType" :key="item.code" :value="item.code">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="所属部门"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-select disabled v-decorator="['orgId',{rules: [{ required: true, message: '请选择所属部门' }]}]" placeholder="请选择">
                <a-select-option v-for="item in departments" :key="item.id"  :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
            <!--<a-col :md="12" :sm="12">-->
                <!--<a-form-item-->
                        <!--label="岗位编码"-->
                        <!--:labelCol="{lg: {span: 7}, sm: {span:7}}"-->
                        <!--:wrapperCol="{lg: {span: 17}, sm: {span: 17} }">-->
                    <!--<BaseInput v-decorator="['code',{rules: [{  required: true, message: '请输入岗位编码' }]}]" placeholder="输入岗位编码" />-->
                <!--</a-form-item>-->
            <!--</a-col>-->
          <a-col :md="12" :sm="12">
            <a-form-item
              label="岗位人数限制(土建)"
              :labelCol="{lg: {span: 7}, sm: {span:7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-select v-decorator="['numberLimitEngineeringCode',{rules: [{ required: true, message: '请选择岗位人数限制' }]}]" placeholder="请选择">
                <a-select-option v-for="item in limitData.numberLimitEngineering" :key="item.code"  :value="item.code">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="是否可兼任"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <a-select v-decorator="['canBothEngineeringCode',{rules: [{ required: true, message: '请选择是否可兼任' }]}]" placeholder="请选择">
                <a-select-option value="1">可兼任</a-select-option>
                <a-select-option value="0">不可兼任</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
              label="是否必填(土建)"
              :labelCol="{lg: {span: 7}, sm: {span:7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-select v-decorator="['requiredEngineeringCode',{rules: [{ required: true, message: '请选择是否必填(土建)' }]}]" placeholder="请选择">
                <a-select-option value="0">否</a-select-option>
                <a-select-option value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="岗位人数限制(专业)"
              :labelCol="{lg: {span: 7}, sm: {span:7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-select v-decorator="['numberLimitProfessionCode',{rules: [{ required: true, message: '请选择岗位人数限制(专业)' }]}]" placeholder="请选择">
                <a-select-option v-for="item in limitData.numberLimitProfession" :key="item.code"  :value="item.code">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
              label="是否可兼任(专业)"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <a-select v-decorator="['canBothProfessionCode',{rules: [{ required: true, message: '是否可兼任(专业)' }]}]" placeholder="请选择">
                <a-select-option value="1">可兼任</a-select-option>
                <a-select-option value="0">不可兼任</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="是否必填(专业)"
              :labelCol="{lg: {span: 7}, sm: {span:7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-select v-decorator="['requiredProfessionCode',{rules: [{ required: true, message: '请选择是否必填(专业)' }]}]" placeholder="请选择">
              <a-select-option value="0">否</a-select-option>
                <a-select-option value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!--<a-col :md="12" :sm="12">-->
            <!--<a-form-item-->
              <!--label="状态"-->
              <!--:labelCol="{lg: {span: 7}, sm: {span: 7}}"-->
              <!--:wrapperCol="{lg: {span:17}, sm: {span: 17} }">-->
              <!--<a-select v-decorator="['jobStatusCode',{rules: [{ required: true, message: '请选择状态' }]}]" placeholder="请选择">-->
                <!--<a-select-option value="1">可用</a-select-option>-->
                <!--<a-select-option value="0">不可用</a-select-option>-->
              <!--</a-select>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import  { getPostType } from '@/api/project/projectsJobs'
import { getProjectIdFromOrg } from '@/api/index'
import { getDepartmentList } from '@/api/businessAffairs/revenueAndCost'
import { getProjectJobsList, getProjectJobsOne, addProjectJobs, editProjectJobs,getDataDict } from '@/api/project/projectsJobs'

// 表单字段
const fields = [ 'jobName','jobTypeCode','code','orgId','requiredEngineeringCode','canBothEngineeringCode','numberLimitEngineeringCode','numberLimitProfessionCode','canBothProfessionCode','requiredProfessionCode','jobStatusCode']

export default {
  name:'a'+Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    title:{
      type: String,
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      queryParam:{
        pageNum:1,
        pageSize:1,
        code:'PD',
        baseOrgType: 1
      },
      form: this.$form.createForm(this),
      limitData:{},
      departments:[],
      id:'',
    }
  },
  created () {
    this.getProjectIdFromOrg();

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })

    this.getDataDict();
  },
  methods:{
    getDataDict(){
      getDataDict().then(res=>{
        this.limitData = res.data
      })
    },
    getProjectIdFromOrg(){
      getProjectIdFromOrg(this.queryParam).then(res=>{
        this.id = res.data.list[0].id
        this.getDepartmentList()
      })
    },
    getDepartmentList(){
      getDepartmentList({id:this.id,type:'2'}).then(res=>{
          this.departments = res.data
      })
    },
  }
}
</script>
